<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #mycanvas {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <canvas id="mycanvas" width="700" height="500"></canvas>
    <script>
        function lineChart(obj, dom) {
            var cvs = dom.getContext("2d");
            width = dom.width;
            height = dom.height;
            data = obj;
            len = data.x.length;
            //间隔宽
            stepwidth = (width - 80) / (len - 1);
            //间隔高
            stepheight = (height - 80) / (data.y.length - 1);
            move = [40, 40];
            line = [40, height - 40];
            //竖线
            for (var i = 0; i < len; i++) {
                cvs.beginPath();
                cvs.fillText(data.x[i], line[0] - 13, line[1] + 20);
                cvs.moveTo(move[0], move[1]);
                cvs.lineTo(line[0], line[1]);
                move[0] += stepwidth;
                line[0] += stepwidth;
                cvs.stroke();
            }
            //单位
            cvs.fillText(data.yuninit, 40, 30);
            //横线
            var start = [40, 40];
            var end = [width - 40, 40]
            for (var i = 0; i < data.y.length; i++) {
                cvs.beginPath();
                cvs.fillText(data.y[i], start[0] - 20, (height - 40) - (i * stepheight));
                cvs.moveTo(start[0], start[1]);
                cvs.lineTo(end[0], end[1]);
                start[1] += stepheight;
                end[1] += stepheight;
                cvs.stroke();
            }
            //折线
            for (var i = 0; i < data.line.length; i++) {

                var item = data.line[i].data;
              
                    cvs.strokeStyle = data.line[i].color;
                for (var j = 0; j < item.length; j++) {
                    cvs.beginPath();
                    cvs.moveTo(40 + j * stepwidth, height - (height - 80) * (item[j] / data.y[data.y.length - 1]) - 40);
                    cvs.lineTo(40 + (j + 1) * stepwidth, height - (height - 80) * (item[j + 1] / data.y[data.y.length -
                        1]) - 40);
                        cvs.stroke();
                    //点呈圆形
                   cvs.beginPath();
                    cvs.arc(40 + j * stepwidth, height - (height - 80) * (item[j] / data.y[data.y.length - 1]) - 40, 5,
                        0, 2 * Math.PI);
                    cvs.fillStyle = "#fff";
                    cvs.fill();
                    cvs.stroke();
                }

                
            }

        }
        new lineChart({
            x: ["1月", "2月", "3月", "4月", "5月", "6月"],
            y: [0, 50, 100, 150, 200, 250, 300],
            yuninit: "万元",
            line: [{
                    color: "red",
                    data: [50, 80, 100, 300, 270, 160]
                },
                {
                    color: "blue",
                    data: [30, 90, 150, 280, 170, 120]
                },
            ]

        }, document.getElementById("mycanvas"))
    </script>
</body>

</html>